/**
 * Created by Administrator on 2017/3/14.
 */
var Button = require('../../../src/libs/button');
var Input = require('../../../src/libs/input');
var Password = require('../../../src/libs/password');
var FormItem = require('../../../src/libs/form-item');
var HyperLink = require('../../../src/libs/hyperlink');

/**
 * @function detectCapsLock
 * @desc 监听大小写
 * 监听password的onkeypress事件
 * @return true
 * */
var detectCapsLock = function(event){
    var e = event || window.event;
    var o = e.target || e.srcElement;
    var keyCode = e.keyCode || e.which; // 按键的keyCode
    //var isShift = e.shiftKey || (keyCode == 16) || false; // shift键是否按住
    if (keyCode >= 65 && keyCode <= 90) {
        return true;
    }else {
        return false;
    }
}

var Root = React.createClass({
    _capsLock:function(e){
        if(detectCapsLock(e)){
            window.PageDM.password.setError('大写锁定');
        }else{
            window.PageDM.password.setError('');
        }
    },
    componentDidMount: function(){
        UEventHub.emit("pageLoad","hello world!");

        UEventHub.on(PageDM.imgBtn.dmbind + UI_EVENT_CONST.SET_UDM_VALUE_EVENT,function(v){
            var _node = this.refs.imgcode;
            _node.setAttribute('src',PageDM.imgBtn.getValue());
        }.bind(this));
    },
    render: function () {
        var PageDM = window.PageDM;

        return (
            <div>
                <div className="header">
                    <div className="top-bar fc-light">
                        <div className="container">
                            <span>服务热线：0816-2373017</span>
                            <span>服务时间：工作日 9:00-18:00</span>
                        <span className="nav-right">
                            <a href="登录.html">登录</a>
                            <a href="注册.html">注册</a>
                            <a href="../帮助中心/平台介绍.html">帮助中心</a>
                            <a href="../index.html">返回绵阳商业银行</a>
                        </span>
                        </div>
                    </div>
                    <div className="header-nav">
                        <div className="container">
                            <div className="logo f-left">
                                <a href="../index.html">
                                    <img src="../images/logo.jpg" alt=""/>
                                </a>
                                <a href="../index.html">
                                    <img src="../images/logoe.jpg" alt=""/>
                                </a>
                            </div>
                            <div className="nav f-right">
                                <ul className="clearfix">
                                    <li><a href="../index.html">首页</a></li>
                                    <li><a href="../我要投资.html">我要投资</a></li>
                                    <li><a href="../我要借款.html">我要借款</a></li>
                                    <li><a href="../账户中心/我的账户.html">我的账户</a></li>
                                </ul>
                            </div>
                            <div className="clear"></div>
                        </div>
                        <div className="shadow"></div>
                    </div>
                </div>

                <div className="container container-logo">
                    <div className="mod-login">
                        <div className="container form-login">
                            <div className="form-wrap">
                                <span className="angle angle-left-top"></span>
                                <span className="angle angle-right-bottom"></span>
                                <div className="form-group">
                                    <div className="logo-title"><b></b>登录<b></b></div>
                                </div>
                                <FormItem label={<i className="icon-phone iconfont"></i>} dmbind={PageDM.phone.dmbind}>
                                    <Input placeholder={PageDM.phone.placeholder} dmbind={PageDM.phone.dmbind}/>
                                </FormItem>
                                <FormItem label={<i className="icon-lock iconfont"></i>} dmbind={PageDM.password.dmbind}>
                                    <Password placeholder={PageDM.password.placeholder} dmbind={PageDM.password.dmbind} onkeypress={this._capsLock}/>
                                </FormItem>
                                <FormItem dmbind={PageDM.imgCode.dmbind}>
                                    <Input placeholder={PageDM.imgCode.placeholder} className="ucs-input code" dmbind={PageDM.imgCode.dmbind}/>
                                    <HyperLink text={<img src={PageDM.imgBtn.value} className="f-left img-code" ref="imgcode" style={{height:"40px"}}/>} onclick={PageDM.imgBtn.onClick}/>
                                </FormItem>
                                <div className="form-button">
                                    <Button value="马上登录" className="ucs-btn-confirm ucs-btn-block" onclick={PageDM.btn.onClick}/>
                                </div>
                                <div className="form-other">
                                     没有账号？
                                    <HyperLink text="快来注册" href={PageDM.URL.register} className="fc-link"/>
                                    <HyperLink text="忘记密码" href={PageDM.URL.findPwd} className="forget"/>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div className="footer">
                    <div className="container">
                        <div className="footer-logo f-left">
                            <p className="logo-foot"><img src="../images/foot-logo.png" alt=""/></p>
                            <p className="txt">
                                2005－2013 绵阳市商业银行股份有限公司
                                <a href="http://www.miitbeian.gov.cn" target="_blank">粤ICP备11013283123号</a>
                            </p>
                        </div>
                        <div className="footer-nav f-right">
                            <div className="col">
                                <h3>关于我们</h3>
                                <ul>
                                    <li><a href="../帮助中心/平台介绍.html">平台介绍</a></li>
                                    <li><a href="../帮助中心/名词解释.html">名词解释</a></li>
                                    <li><a href="../帮助中心/联系我们.html">联系我们</a></li>
                                    <li><a href="../帮助中心/服务协议.html">服务协议</a></li>
                                </ul>
                            </div>
                            <div className="col">
                                <h3>安全保障</h3>
                                <ul>
                                    <li><a href="../帮助中心/安全保障.html">项目安全</a></li>
                                    <li><a href="../帮助中心/安全保障.html">资金安全</a></li>
                                    <li><a href="../帮助中心/安全保障.html">信息安全</a></li>
                                    <li><a href="../帮助中心/安全保障.html">账户安全</a></li>
                                </ul>
                            </div>
                            <div className="col">
                                <h3>帮助中心</h3>
                                <ul>
                                    <li><a href="../帮助中心/投资操作指引.html">投资指引</a></li>
                                    <li><a href="../帮助中心/融资操作指引.html">融资指引</a></li>
                                    <li><a href="../帮助中心/平台公告.html">平台公告</a></li>
                                    <li><a href="javascript:;">常见问题</a></li>
                                </ul>
                            </div>
                            <div className="col col-service">
                                <p>客服专线<br/>0816-2373017</p>
                                <p>服务时间<br/>工作日9:00 - 18:00</p>
                            </div>
                        </div>
                        <div className="clear"></div>
                    </div>
                </div>
            </div>
        )
    }
});
ReactDOM.render(<Root/>, document.getElementById('main'));